// 充值记录和消费明细内容的公共组件

import React, { useState } from "react";
import styles from "./index.module.less";
import { connect } from "react-redux";
import { rechargeRecordAction, consumeDetailsAction } from "@redux/actions";
import moment from "moment";
import numberToFixed2 from "@utils/numberToFixed2";

const Record = (props) => {
    const {
        headerTitle,
        type,
        rec1,
        rec2,
        totalPages,
        numbersOnePage,
        rechargeRecordAction,
        consumeDetailsAction,
    } = props;

    const [currentPage, setCurrentPage] = useState(1);
    const [jumpPage, setJumpPage] = useState(1);

    const handleNext = () => {
        if (currentPage < totalPages) {
            setCurrentPage(currentPage + 1);
            if (type === 1) {
                rechargeRecordAction(currentPage + 1, 1, numbersOnePage);
            } else if (type === 2) {
                consumeDetailsAction(currentPage + 1, 2, numbersOnePage);
            }
        }
    };

    const handleJump = () => {
        if (
            parseInt(jumpPage) === parseFloat(jumpPage) &&
            parseInt(jumpPage) > 0 &&
            parseInt(jumpPage) <= totalPages
        ) {
            setCurrentPage(parseInt(jumpPage));
            if (type === 1) {
                rechargeRecordAction(parseInt(jumpPage), 1, numbersOnePage);
            } else if (type === 2) {
                consumeDetailsAction(parseInt(jumpPage), 2, numbersOnePage);
            }
        }
    };

    return (
        <>
            <header className={styles.header}>
                {headerTitle &&
                    headerTitle.map((item, index) => {
                        return (
                            <p
                                key={index}
                                className={`${styles[`p${index + 1}`]}`}
                            >
                                {item}
                            </p>
                        );
                    })}
            </header>
            <ul className={styles.record_ul}>
                {type === 1
                    ? rec1.onePage &&
                      rec1.onePage.map((item, index) => {
                          return (
                              <li key={index}>
                                  <p className={styles.p1}>
                                      {moment(item.rechargeDate).format(
                                          "YYYY-MM-DD HH:mm:ss"
                                      )}
                                  </p>
                                  <p className={styles.p2}>{item.orderId}</p>
                                  <p className={styles.p3}>
                                      ¥{numberToFixed2(item.payAmount)}
                                  </p>
                                  <p className={styles.p4}>
                                      {numberToFixed2(item.receiveGmoney)}
                                  </p>
                                  <p className={styles.p5}>
                                      {item.paymentChannel}
                                  </p>
                                  <p className={styles.p6}>
                                      {item.paymentStatus}
                                  </p>
                              </li>
                          );
                      })
                    : rec2.onePage &&
                      rec2.onePage.map((item, index) => {
                          return (
                              <li key={index}>
                                  <p className={styles.p1}>
                                      {moment(item.consumeDate).format(
                                          "YYYY-MM-DD HH:mm:ss"
                                      )}
                                  </p>
                                  <p className={styles.p2}>{item.orderId}</p>
                                  <p className={styles.p3}>
                                      {item.consumeName}
                                  </p>
                                  <p className={styles.p4}>
                                      {numberToFixed2(item.consumeAmount)}
                                  </p>
                                  <p className={styles.p5}>
                                      {item.consumeChannel}
                                  </p>
                                  <p className={styles.p6}>
                                      {item.consumeStatus}
                                  </p>
                              </li>
                          );
                      })}
            </ul>
            <footer
                className={styles.footer}
                style={{
                    display: `${
                        type === 1
                            ? rec1.onePage.length > 0
                                ? "flex"
                                : "none"
                            : rec2.onePage.length > 0
                            ? "flex"
                            : "none"
                    }`,
                }}
            >
                <div className={styles.left}>
                    <div className={styles.current_page}>{currentPage}</div>
                    <input
                        type="button"
                        defaultValue="下一页"
                        className={`${styles.next_page} ${
                            currentPage < totalPages ? styles.active : ""
                        }`}
                        onClick={() => {
                            handleNext();
                        }}
                    />
                </div>
                <div className={styles.rig}>
                    <p className={styles.total_numbers}>共{totalPages}页</p>
                    <div className={styles.jump_to}>
                        <span
                            style={{ cursor: "pointer", color: "#673ab7cc" }}
                            onClick={handleJump}
                        >
                            前往
                        </span>
                        <input
                            type="text"
                            autoComplete="off"
                            value={jumpPage}
                            className={styles.jump_num}
                            onChange={(e) => {
                                setJumpPage(e.target.value);
                            }}
                        />
                        <span>页</span>
                    </div>
                </div>
            </footer>
        </>
    );
};

export default connect(
    (state) => ({
        rec1: state.rechargeRecordReducer,
        rec2: state.consumeDetailsReducer,
    }),
    { rechargeRecordAction, consumeDetailsAction }
)(Record);
